<template>
  <div>
    <home-head title="精品分类" />
    <div class="classify">
      <ul class="classify-left">
        <li v-for="(list, index) in lists"
            :key="list.id"
            :class="{active:active === index}"
            @click="listIndex(index)">
          {{ list.name }}</li>
      </ul>
      <div class="classify-right">
        <img class="wushuj"
             src="../../assets/img/wushuj.jpeg"
             v-show="!items.length"
             alt="">
        <home-items v-show="items.length"
                    :items="items" />
      </div>
    </div>
    <home-banner />
  </div>
</template>

<script>
import HomeBanner from 'components/HomeBanner'
import HomeHead from 'components/HomeHead'
import HomeItems from '../Home/components/HomeItems.vue'
import { fetchCate, fetchItem } from 'api'
export default {
  name: 'Cate',
  data () {
    return {
      active: 0,
      lists: [],
      items: []
    }
  },
  created () {
    this.fetchCate()
  },
  methods: {
    fetchCate () {
      fetchCate().then(res => {
        if (res.data.code === 0) {
          this.lists = res.data.data
        }
        this.listIndex()
      })
    },
    listIndex (index = 0) {
      fetchItem({
        categoryId: this.lists[index].id
      }).then(res => {
        if (res.data.code === 0) {
          this.active = index
          this.items = res.data.data.result
        }
        if (res.data.code === 700) {
          this.items = []
          this.active = index
          this.isShow = true
        } else {
          this.isShow = false
        }
      })
    }
  },
  // filters: {
  //   itemTitle (v, len = 10) {
  //     if (v.length > len) {
  //       return v.substr(0, len) + '...'
  //     } else {
  //       return v
  //     }
  //   },
  //   itemPrice (v, sign = '$') {
  //     return sign + v
  //   }
  // },
  components: {
    HomeBanner,
    HomeHead,
    HomeItems
  }
}
</script>

<style lang="scss" scoped>
.classify {
  position: fixed;
  top: 46px;
  left: 0;
  right: 0;
  bottom: 50px;
  display: flex;
  .classify-left {
    border-right: 1px solid rgba(153, 153, 153, 0.274);
    li {
      height: 56px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      &.active {
        background-color: #fff;
        &::before {
          content: "";
          display: inline-block;
          width: 2px;
          height: 32px;
          background: #ff734c;
          position: absolute;
          left: 0;
        }
      }
    }
  }
  .classify-right {
    flex: 1;
    overflow: auto;
    .wushuj {
      width: 100%;
    }
  }
  .item {
    width: 94%;
    margin: 12px auto;
    height: 190px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-img {
      width: 170px;
      height: 100%;
    }
    .item-info {
      height: 100%;
      flex: 1;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      .name {
        font-size: 15px;
        font-weight: bold;
      }
      .desc {
        font-size: 14px;
      }
      .action {
        flex: 1;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        .price {
          padding-bottom: 15px;
          font-weight: bold;
        }
        .icon {
          font-size: 24px;
          color: #ff734c;
        }
      }
    }
  }
}
</style>
